<template>
  <div class="container">
    <div class="form-item2">
      UR榜单奖品配置：
      <a href="javascript:;" @click="handleEditSku(1)" style="margin-right:20px;">【UR日榜单】</a>
      <a href="javascript:;" @click="handleEditSku(2)" style="margin-right:20px;">【UR周榜单】</a>
      <a href="javascript:;" @click="handleEditSku(3)" style="">【UR月榜单】</a>
    </div>
    <IForm :formFrame="frame" class="form-container" :formData.sync="form"></IForm>
    <div slot="action">
      <!-- <a-button class="btn" @click="cancel">取消</a-button> -->
      <a-button class="btn" type="primary" @click="submit">保存</a-button>
    </div>
    <EditSku v-if="isEditSku" :info="info" @close="isEditSku = false"></EditSku>
  </div>
</template>

<script>
  // import AttrEditor from "./components/AttrEditor"
  import IForm from "@/components/IForm"
  import EditSku from './EditUrSkuPopup.vue'

  const resourceType = 'magic_point'

  export default {
    components: {
      IForm,
      EditSku
      // AttrEditor
    },
    data() {
      return {
        uuid: '',
        form: {
        },
        info: {},
        isEditSku: false,
        categoryList: []
      }
    },
    computed: {
      categoryOptions() {
        return this.categoryList.map(item => {
          return {
            title: item.title,
            value: item.id
          }
        })
      },
      frame() {
        return [
          {
            title: '魔力值开关',
            key: 'switch',
            type: 'boolean',
            placeholder: '',
            tips: '关闭后将不启用魔力值',
            newline: true,
            required: true,
          },
          {
            title: '指定活动获得魔力值',
            key: 'activity_types',
            type: 'multi_check',
            span: 24,
            options: [
              {
                title: '福袋',
                value: 'fudai'
              },
              {
                title: '一番赏',
                value: 'yifanshang'
              },
              {
                title: '自组赏',
                value: 'peilashang'
              },
            ],
            tips: '注: 选定后的活动抽赏才会获得魔力值',
            newline: true,
            required: true,
          },
          {
            title: '获得魔力值比例',
            key: 'reward_ratio',
            // type: '',
            placeholder: '如：0.1',
            span: 10,
            tips: '注: 根据获得赏品价值的百分比获得魔力值，如填写：0.1，价值为100元的赏品获得10个魔力值',
            newline: true,
            required: true,
          },
          {
            title: '要求赏品价值>=(元)',
            key: 'sku_money',
            placeholder: '如：100',
            span: 10,
            tips: '注: 0为不限制，如填写：100，则价值>=100元的赏品才会获得魔力值',
            newline: true,
            required: true,
          },
          {
            title: '指定时间-获得更多',
            key: 'more_reward_switch',
            type: 'boolean',
            placeholder: '',
            newline: true,
            required: true,
          },
          {
            title: '开始时间',
            key: 'reward_more_start_time',
            type: 'date',
            span: 5,
            newline: true,
            required: true,
            where: {
              more_reward_switch: 1,
            }
          },
          {
            title: '结束时间',
            key: 'reward_more_end_time',
            type: 'date',
            span: 5,
            newline: true,
            required: true,
            where: {
              more_reward_switch: 1,
            }
          },
          {
            title: '获得倍数',
            key: 'reward_more_ratio',
            // type: '',
            placeholder: '如：2',
            span: 6,
            tips: '如：填写：2，将获得2倍的魔力值',
            newline: true,
            required: true,
            where: {
              more_reward_switch: 1,
            }
          },
          {
            title: '指定【福袋】商品',
            key: 'fudai_ids',
            type: 'activity_list_input',
            activity_type: 'fudai',
            span: 24,
            placeholder: '请输入',
            newline: true,
            where: {
              more_reward_switch: 1,
            }
          },
          {
            title: '指定【一番赏】商品',
            key: 'yifanshang_ids',
            type: 'activity_list_input',
            activity_type: 'yifanshang',
            span: 24,
            placeholder: '请输入',
            newline: true,
            where: {
              more_reward_switch: 1,
            }
          },
          {
            title: '指定【自组赏】商品',
            key: 'peilashang_ids',
            type: 'activity_list_input',
            activity_type: 'peilashang',
            span: 24,
            placeholder: '请输入',
            newline: true,
            where: {
              more_reward_switch: 1,
            }
          },
        ]
      }
    },
    created() {
      this.$http.get(`/setting/sys/${resourceType}`).then(res => {
        this.form = res.data.setting || {}
        this.$set(this.form, 'return_type', this.form.return_type || 'money')
        // this.form.return_type = this.form.return_type || 'money'
      })
    },
    mounted() {},
    watch: {},
    methods: {
      cancel() {
        this.$router.back(-1)
      },
      // 编辑奖品列表
      handleEditSku(rank_type) {
        this.isEditSku = true
        this.info.rank_type = rank_type
      },
      submit() {
        this.$http.post(`/setting/sys/${resourceType}`, {
          setting: this.form
        }).then(res => {
          this.$message.success('保存成功')
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .form-container {
    padding-bottom: 120px;
  }
  .form-item2 {
    padding: 20px 0px 20px 20px;
    position: relation;
    margin-bottom: 10px;
    border: 1px solid #e1e1e1;
  }
  .form-title {
    position: absolute;
    top: -10px;
    left: 10px;
    font-size: 110%;
    font-weight: 700;
    background: white;
    padding: 0px 10px;
  }
  .container {
    .btn {
      margin-right: 30px;
    }
  }
</style>
